<script>
export default {
  name: 'SearchControl',
  props: {
    placeholder: {
      type: String,
      default: '输入关键字'
    },
    value: {
      type: String
    }
  },

  data() {
    return {
      displayValue: this.value
    }
  },

  methods: {
    query(e) {
      let value = this.$el.querySelector('.form-control').value
      this.$emit('searchcontrol-change', value)
    }
  }
}
</script>

<template>
<div class="search-control input-group">
  <input type="text" name="q" class="form-control" :placeholder="placeholder" :value="displayValue" />
  <button class="btn" @click="query">Go!</button>
</div>
</template>

<style>
.search-control > input {
  border: 1px solid #edeeef;
  padding: 8px 20px;
  outline: 0;
}

.search-control > .btn {
  padding: 8px;
  background-color: #edeeef;
  border: 1px solid #edeeef;
  margin-left: -5px;
  cursor: pointer;
}

.search-control > .btn:focus,
.search-control > .btn:active {
  outline: 0;
  background-color: #dfdfdf;
}
</style>